<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Welkom op uw portaal van myHealth</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" type="text/css" href="static/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="static/font-awesome/css/font-awesome.min.css" />

    <script type="text/javascript" src="static/js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="static/js/knockout-3.2.0.js"></script>
    <script type="text/javascript" src="static/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">

    <div class="page-header">
        <h1><img src="static/img/logo.jpg"></h1>
        <div align="right">
            <div align="right"><a href="index.html">Log out</a>&nbsp;&nbsp;&nbsp;
                <img src="static/img/NL.png"> / <img src="static/img/EN.png">
            </div>
        </div>

        <!-- Collapsible Panels - START -->
        <div class="navbar navbar-default">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Rekeningen</a>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Algemeen</a></li>
                    <li><a href="#"><font color="red">Openstaand (3)</font></a></li>
                    <li><a href="#"><font color="green">Betaald</font></a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="landing.html">Terug naar home</a></li>
                </ul>
            </div>
        </div>

        <div class="container">
            <div class="text-center">
                <h1>Openstaande rekeningen (3)</h1>
                <p class="lead">
                    Op deze pagina kunt u een overzicht van uw rekeningen bekijken. Zodra wij de betaalinformatie van uw zorgaanbieder hebben gekregen zal dit ook in dit overzicht verwerkt worden.
                </p>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="text-center"><strong>Rekening #2456734</strong></h3>
                        </div>
                        <div class="panel-body">
                            <div class="table-responsive">
                                <table class="table table-condensed">
                                    <thead>
                                    <tr>
                                        <td><strong>Betreft</strong></td>
                                        <td class="text-center"><strong>Behandelcode</strong></td>
                                        <td class="text-center"><strong>Datum</strong></td>
                                        <td class="text-center"><strong>Status</strong></td>
                                        <td class="text-right"><strong>Totaal</strong></td>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>Verdovingen</td>
                                        <td class="text-center">9001</td>
                                        <td class="text-center">24/09/2014</td>
                                        <td class="text-center">Onbetaald</td>
                                        <td class="text-right">€12,00</td>
                                    </tr>
                                    <tr>
                                        <td>Trekken verstandskies</td>
                                        <td class="text-center">9002</td>
                                        <td class="text-center">24/09/2014</td>
                                        <td class="text-center">Onbetaald</td>
                                        <td class="text-right">€30,00</td>
                                    </tr>
                                    <tr>
                                        <td>Uurloon sadist</td>
                                        <td class="text-center">9003</td>
                                        <td class="text-center">24/09/2014</td>
                                        <td class="text-center">Onbetaald</td>
                                        <td class="text-right">€90,00</td>
                                    </tr>

                                    <tr>
                                        <td class="highrow"></td>
                                        <td class="highrow"></td>
                                        <td class="highrow"></td>
                                        <td class="highrow text-center"><strong>Subtotaal</strong></td>
                                        <td class="highrow text-right">€132.00</td>
                                    </tr>
                                    <tr>
                                        <td class="emptyrow"></td>
                                        <td class="emptyrow"></td>
                                        <td class="emptyrow"></td>
                                        <td class="emptyrow text-center"><strong>Totaal</strong></td>
                                        <td class="emptyrow text-right">€132.00</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <style>
            .panel-heading span {
                margin-top: -20px;
                font-size: 15px;
            }
            .row {
                margin-top: 40px;
                padding: 0 10px;
            }
            .clickable {
                cursor: pointer;
            }
        </style>

        <script type="text/javascript">
            jQuery(function ($) {
                $('.panel-heading span.clickable').on("click", function (e) {
                    if ($(this).hasClass('panel-collapsed')) {
                        // expand the panel
                        $(this).parents('.panel').find('.panel-body').slideDown();
                        $(this).removeClass('panel-collapsed');
                        $(this).find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
                    }
                    else {
                        // collapse the panel
                        $(this).parents('.panel').find('.panel-body').slideUp();
                        $(this).addClass('panel-collapsed');
                        $(this).find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
                    }
                });
            });
        </script>

        <!-- Collapsible Panels - END -->

    </div>
</div>
</body>
</html>